import React, {Component} from 'react'
import {connect} from 'react-redux';
import { Link } from "react-router-dom";

import Header from "../components/header";

import {List,Button, InputItem, Toast} from 'antd-mobile';
import {userRegister} from "../redux/actions/userAction" 

export class Register extends Component {
  constructor (props){
   super(props)
   this.registerProcess = false;
   this.state= {
    username:{
      hasError: false,
      value: '',
    },
    password:{
      hasError: false,
      value: '',
    },
    password2:{
      hasError: false,
      value: '',
    },
    antherone:{
      hasError: false,
      value: '',
    },
    truename:{
      hasError: false,
      value: '',
    },
    phone:{
      hasError: false,
      value: '',
    },
    QQvalue:{
      hasError: false,
      value: '',
    },
    moneyPW:{
      hasError: false,
      value: '',
    }
   }
}

componentDidMount() {
  this.autoFocusInst.focus();
}
onErrorClick = () => {
  if (this.state.username.hasError) {
    Toast.info('请输入4-10个字符，仅可以输入英文字母跟数字组合');
  }else if (this.state.password.hasError) {
    Toast.info('必须为6-12个英文或数字且符合0-9或a-z字元');
  }else if (this.state.password2.hasError) {
    Toast.info('两次输入结果不一致');
  }else if (this.state.truename.hasError) {
    Toast.info('请输入汉字');
  } else if (this.state.phone.hasError) {
    Toast.info('请输入11位电话号码');
  } else if (this.state.moneyPW.hasError) {
    Toast.info('请输入4位取款密码');
  }else if (this.state.QQvalue.hasError) {
    Toast.info('QQ号码应该至少4位');
  }
}
onChangename = (value) => {
  var hasError = false;
  var temp = value.replace(/\s/g, '')
  if (temp.length > 12 || temp.length < 4) {
      hasError = true;
  } 
  this.setState({
    username:{
      hasError,
      value
    }
  }); 
}
onChangepassword = (value) => {
  var hasError = false;
  var rgx = value.replace(/\s/g, '')
  if (rgx.length < 6  || rgx.length>12) {
      hasError = true;
  } 
  this.setState({
    password:{
      hasError,
      value
    }
  });
}
onChangepassword2 = (value) => {
  var hasError = false;
  var rgx = value.replace(/\s/g, '')
  console.log(rgx , this.state.password);
  if (rgx!=this.state.password.value) {
      hasError = true;
  } 
  this.setState({
    password2:{
      hasError,
      value
    }
  });
}
onChangeantherone = (value) => {
  var hasError = false;
  var rgx = value.replace(/\s/g, '')
  this.setState({
    antherone:{
      hasError,
      value
    }
  });
}
onChangetruename = (value) => {
  var hasError = false;
  var rgx = value.replace(/\s/g, '')
  if (!(/[\u4E00-\u9FA5]{1,10}/g.test(rgx))) {
      hasError = true;
  } 
  this.setState({
    truename:{
      hasError,
      value
    }
  });
}
onChangephone = (value) => {
  var hasError = false;
  var rgx = value.replace(/\s/g, '')
  if (!(/^((13[0-9])|(15[^4])|(18[0,2,3,5-9])|(17[0-8])|(147))\d{8}$/).test(rgx)) {
      hasError = true;
  } 
  this.setState({
    phone:{
      hasError,
      value
    }
  });
}
onChangeQQvalue = (value) => {
  var hasError = false;
  var rgx = value.replace(/\s/g, '')
  if (rgx.length<6) {
      hasError = true;
  } 
  this.setState({
    QQvalue:{
      hasError,
      value
    }
  });
}
onChangemoneyPW = (value) => {
  var hasError = false;
  var rgx = value.replace(/\s/g, '')
  if(rgx.length>4){
    return
  }
  if (rgx.length!=4) {
      hasError = true;
  } 
  this.setState({
    moneyPW:{
      hasError,
      value
    }
  });
}

Register =() =>{
  const {username,password,password2,antherone,truename,phone,QQvalue,moneyPW} = this.state;
  if(username.value.length < 4  || username.value.length>12){
    return Toast.info('用户名仅可以输入4-12个英文字母跟数字组合');
  }else if(password.value.length < 6  || username.value.length>12){
    return Toast.info('密码必须为6-12个英文或数字且符合0-9或a-z字元');
  }else if(password2.value != password.value){
    return Toast.info('密码两次输入结果不一致');
  }else if(!antherone.value){
    return Toast.info('请输入介绍人');
  }else if(!(/[\u4E00-\u9FA5]{1,10}/g.test(truename.value))){
    return Toast.info('真实姓名请输入汉字');
  }else if(!(/^((13[0-9])|(15[^4])|(18[0,2,3,5-9])|(17[0-8])|(147))\d{8}$/).test(phone.value.replace(/\s/g, ''))){
    return Toast.info('电话号码请输入11位11');
  }else if(QQvalue.value.length<6){
    return Toast.info('QQ号码应该至少6位');
  }else if(moneyPW.value.length!=4){
    return Toast.info('请输入4位取款密码');
  }
  if(this.registerProcess){return }
  const {dispatch,history} = this.props
  var params ={
    "userName": username.value,
    "password1": password.value,
    "password2": password2.value,
    "realName": truename.value,
    "userMobile": phone.value.replace(/\s/g, ''),
    'withdrawPwd': moneyPW.value,
    "userAgent": antherone.value,
    'userQq':QQvalue.value
  }
  this.registerProcess = true;
  let _this = this;
  Toast.loading("提交中",0)
  dispatch(userRegister(params,(data)=>{
    _this.registerProcess = false;
    Toast.hide()
    if (data.errorCode == "000000") {
      Toast.info('注册成功');
      history.push('/login');
    } else {
      Toast.info(data.msg);
    }
  }))
}

   render() {
   return <div className="register">
     <Header title="注册" {...this.props}></Header>
        <div className="container">       
        <List className="register-container">
          <InputItem
            ref={el => this.autoFocusInst = el}
            type="text"
            placeholder="请输入账号(请输入4-12个字符，仅可以输入英文字母跟数字组合)"
            error={this.state.username.hasError}
            onErrorClick={this.onErrorClick}
            onChange={this.onChangename}
            value={this.state.username.value}
          >*</InputItem>

           <InputItem
            type="password"
            placeholder="请输入密码(必须为6-12个英文或数字且符合0-9或a-z字元)"
            error={this.state.password.hasError}
            onErrorClick={this.onErrorClick}
            onChange={this.onChangepassword}
            value={this.state.password.value}
          >*</InputItem>

          <InputItem
            type="password"
            placeholder="请确认密码"
            error={this.state.password2.hasError}
            onErrorClick={this.onErrorClick}
            onChange={this.onChangepassword2}
            value={this.state.password2.value}
          >*</InputItem>

          <InputItem
            type="text"
            placeholder="介绍人"
            onChange={this.onChangeantherone}
            value={this.state.antherone.value}
          >*</InputItem>

          <InputItem
            type="text"
            placeholder="真实姓名（真实姓名要和银行开户姓名一致）"
            error={this.state.truename.hasError}
            onErrorClick={this.onErrorClick}
            onChange={this.onChangetruename}
            value={this.state.truename.value}
          >*</InputItem>

          <InputItem
            type="phone"
            placeholder="手机号码(以手机形式确认提款，必须填写真实号码)"
            error={this.state.phone.hasError}
            onErrorClick={this.onErrorClick}
            onChange={this.onChangephone}
            value={this.state.phone.value}
          >*</InputItem>

          <InputItem
            type="num"
            placeholder="QQ号"
            error={this.state.QQvalue.hasError}
            onErrorClick={this.onErrorClick}
            onChange={this.onChangeQQvalue}
            value={this.state.QQvalue.value}
          >*</InputItem>

          <InputItem
            type="num"
            placeholder="提款密码(4位数字密码)"
            error={this.state.moneyPW.hasError}
            onErrorClick={this.onErrorClick}
            onChange={this.onChangemoneyPW}
            value={this.state.moneyPW.value}
          >*</InputItem> 
        </List>
        <Button type="primary" onClick={this.Register}>确认注册</Button>

        </div>
   </div>
   }
}

function mapStateToProps(state) {
  const {user} = state;
  return {
    user
  };
}

export default connect(mapStateToProps)(Register);
